<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 作者管理</el-breadcrumb-item>
				<el-breadcrumb-item>签约作者查询</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<template>
				<el-table :data="Authors" style="width: 100%">
					<el-table-column label="作者id" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.authorId }}</span>
						</template>
					</el-table-column>
					<el-table-column label="姓名" width="180">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top">
								<p>姓名: {{ scope.row.name }}</p>
								<p>住址: {{ scope.row.address }}</p>
								<p>稿酬: {{ scope.row.name }}</p>
								<p>邮箱: {{ scope.row.address }}</p>
								<p>QQ: {{ scope.row.name }}</p>
								<p>银行卡: {{ scope.row.name }}</p>
								<p>申请时间: {{ scope.row.address }}</p>
								<p>身份证号: {{ scope.row.address }}</p>
								<p>出生年月: {{ scope.row.name }}</p>
								<p>个人简介: {{ scope.row.address }}</p>
								<div slot="reference" class="name-wrapper">
									<el-tag size="medium">{{ scope.row.name }}</el-tag>
								</div>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column label="电话" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.authorTel }}</span>
						</template>
					</el-table-column>
					<el-table-column label="笔名" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.penName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="性别" width="180">
						<template slot-scope="scope">
							<span style="margin-left: 10px">{{ scope.row.sex }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看作者的所有书籍</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<el-drawer :visible.sync="table" direction="rtl" size="50%">
				<el-table :data="Temp">
					<el-table-column property="bookId" label="书籍id" width="50"></el-table-column>
					<el-table-column property="categoryName" label="分类" width="50"></el-table-column>
					<el-table-column property="bookName" label="书籍名称" width="100"></el-table-column>
					<el-table-column property="count" label="总更新字数" width="150"></el-table-column>
					<el-table-column property="createTime" label="创建书籍时间" width="100"></el-table-column>
					<el-table-column property="updateTime" label="最后更新时间" width="100"></el-table-column>
					<el-table-column property="description" label="书籍简介"></el-table-column>
				</el-table>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				Authors: [],
				table: false,
				Book: [],
				Temp: [],
			}
		},
		methods: {
			handleShow(index, row) {
				var _this = this;
				_this.Book = row;
				console.log(_this.Book.authorId);
				$.ajax({
					url: "http://localhost/manager/managerselect",
					type: "get",
					data: {
						"authorid": _this.Book.authorId
					},
					// contentType: "application/json;charset=utf-8",
					success: function(data) {
						console.log(data);
						_this.Temp = data.data;
						_this.table = true;
					}
				});
			},
			// 管理员
			select1: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/manager/allauthor",
					type: "get",
					success: function(data) {
						console.log(data);
						_this.Authors = data.data;
					}
				});
			},
			// 编辑
			select2: function(editorTel) {
				console.log(editorTel);
				var _this = this;
				$.ajax({
					url: "http://localhost/editor/selectbyeditortel",
					type: "get",
					data: {
						"editortel": editorTel
					},
					// contentType: "application/json;charset=utf-8",
					success: function(data) {
						console.log(data);
						_this.Authors = data.data;
					}
				});
			}
		},
		created() {
			if (sessionStorage.getItem("editor") != null) {
				var editorTel = sessionStorage.getItem("editor");
				this.select2(editorTel);
			} else {
				this.select1();
			}
		}
	}
</script>

<style>
</style>
